<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-03-29 19:02:58
 * @LastEditTime : 2023-09-07 18:26:31
-->
<script setup lang="ts" name="IkFlowIconPicker">
import { Select } from '@element-plus/icons-vue'
const props = defineProps({
  modelValue: {
    type: String,
    default: 'ik-shouye'
  },
  iconBackground: {
    type: String,
    default: '#28b8a4'
  },
  colors: {
    type: Array as PropType<Array<string>>,
    default: () => [
      '#1e90ff',
      '#28b8a4',
      '#1ABD89',
      '#FF933C',
      '#409EFF',
      '#F45D41',
      '#8167F5',
      '#5D7092',
      '#73A0FA',
      '#909399'
    ]
  }
})
const emit = defineEmits(['update:modelValue', 'update:iconBackground'])
const icons: Ref<Array<{ class: string; name: string; }>> = ref([])
const icon_prefix = ref('ikflow')

fetch('iconfont-flow/iconfont.json').then(res => {
  res.json().then(data => {
    icon_prefix.value = data.css_prefix_text.substring(
      0,
      data.css_prefix_text.length - 1
    )
    icons.value = data.glyphs.map((item: any) => {
      return {
        ...item,
        class: `${data.css_prefix_text}${item.font_class}`
      }
    })
  })
})

const visible = ref(false)
const hid = ref(true)
const handEditIcon = () => {
  visible.value = true
  hid.value = false
}
const handSelect = (item: { class: string; }) => {
  emit('update:modelValue', item.class)
}
const activeBg = ref(props.iconBackground)
const handSelectBg = (item: string) => {
  emit('update:iconBackground', item)
  activeBg.value = item
}
const handCloseIcon = () => {
  hid.value = true
  const timeout = window.setTimeout(() => {
    visible.value = false
    clearTimeout(timeout)
  }, 250)
}
</script>

<template>
  <div
    class="ik-flow-icon-picker"
    :style="{ backgroundColor: iconBackground || '#28b8a4' }"
  >
    <i :class="`ikflow ${modelValue} ikflow-selected`"></i>
    <i class="ikflow ikflow-bianji1 icon-bianji-picker" @click="handEditIcon"></i>
    <div
      v-if="visible"
      :class="`ik-icon-dialog ${hid ? 'ik-icon-dialog-close' : null}`"
    >
      <div class="icon-header">
        <span>选择图标</span>
        <i class="ikflow ikflow-guanbi" @click="handCloseIcon"></i>
      </div>
      <div class="icon-content">
        <i
          v-for="item in icons"
          :key="item.class"
          :title="item.name"
          :class="`${icon_prefix} ${item.class} icon-list ${
            modelValue === item.class ? 'active' : null
          }`"
          @click="handSelect(item)"
        ></i>
      </div>
      <div class="icon-color-bar">
        <span
          v-for="item in colors"
          :key="item"
          class="color-picker"
          :style="{ backgroundColor: item }"
          @click="handSelectBg(item)"
        >
          <template v-if="activeBg === item">
            <el-icon><Select /></el-icon>
          </template>
        </span>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.ik-flow-icon-picker {
  display: flex;
  width: 50px;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 50px;
  border-radius: 4px;
  color: var(--ik-color-white);

  .ikflow-selected {
    font-size: 35px;
    transition: all 0.25s;
  }

  .icon-bianji-picker {
    color: var(--el-text-color-regular);
    position: absolute;
    right: -11px;
    bottom: -4px;
    background: var(--ik-input-bg);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    cursor: pointer;

    &:hover {
      color: var(--ik-color-primary);
    }
  }

  .ik-icon-dialog {
    --border-radius: 6px;

    position: absolute;
    height: 330px;
    background: var(--el-bg-color-page);
    width: 400px;
    z-index: 9;
    border-radius: var(--border-radius);
    bottom: -340px;
    box-shadow: var(--el-box-shadow);
    animation: ik-poper 0.25s ease-in-out forwards;

    @keyframes ik-poper {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .icon-header {
      border-radius: var(--border-radius) var(--border-radius) 0 0;
      color: var(--el-text-color-regular);
      height: 45px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 16px;
      background-color: var(--el-bg-color);
      border-bottom: 1px solid var(--ik-border-color);

      .ikflow-guanbi {
        cursor: pointer;
        transition: color 0.3s;

        &:hover {
          color: var(--ik-color-primary);
        }
      }
    }

    .icon-content {
      height: 242px;
      border-bottom: 1px solid var(--ik-border-color);
      padding: 8px 5px;
      overflow-y: auto;
      display: grid;
      grid-template-columns: repeat(auto-fill, 48px);
      place-items: center center;
      grid-auto-rows: min-content;

      .icon-list {
        cursor: pointer;
        transition: color 0.3s;
        background: var(--el-bg-color);;
        color: var(--el-text-color-regular);
        // margin-right: 8px;
        margin-bottom: 8px;
        width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        display: inline-flex;
        overflow: hidden;
        border: 1px solid transparent;

        &:hover {
          color: var(--ik-color-primary);
          font-weight: 600;
        }

        &.active {
          color: var(--ik-color-primary);
          border-color: var(--ik-color-primary);
        }
      }
    }

    .icon-color-bar {
      height: 45px;
      display: flex;
      padding: 0 16px;
      background-color: var(--el-bg-color);
      border-radius: 0 0 var(--border-radius) var(--border-radius);
      align-items: center;

      .color-picker {
        display: inline-block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin-right: 16px;
        cursor: pointer;
        transition: border 0.3s;
        border: 1px solid transparent;
        position: relative;

        &:hover {
          border: 1px solid var(--el-text-color-primary);
        }

        .el-icon {
          position: absolute;
          left: 1px;
          top: 2px;
          font-size: 18px;
        }
      }
    }
  }

  .ik-icon-dialog-close {
    animation: ik-close-poper 0.25s ease-in-out forwards;
  }

  @keyframes ik-close-poper {
    from {
      opacity: 1;
      transform: translateY(0);
    }

    to {
      opacity: 0;
      transform: translateY(10px);
    }
  }
}
</style>
